<template>
  <div>
    <!-- header头部模块制作 start -->
    <header class="header w">
      <!-- logo模块 -->
      <div class="logo">
        <h1>
          <a href="" title="源浩商城">源浩商城</a>
        </h1>
      </div>
      <!-- search搜索模块 -->
      <div class="search">
        <input type="search" name="" id="" placeholder="语言开发" />
        <button @click="search">搜索</button>
      </div>
      <!-- hotwords模块制作 -->
      <div class="hotwords">
        <a href="#" class="style_red"
          ><router-link to="/developing">源浩优惠首发</router-link></a
        >
        <a href="#"><router-link to="/developing">亿元优惠</router-link></a>
        <a href="#"><router-link to="/developing">美满99减30</router-link></a>
        <a href="#"><router-link to="/developing">办公用品</router-link></a>
        <a href="#"><router-link to="/developing">电脑</router-link></a>
        <a href="#"><router-link to="/developing">通信</router-link></a>
      </div>
      <!-- 购物车模块 -->
      <div class="shopcar">
        <router-link to="/cart">我的购物车</router-link>
        <i class="count">2</i>
      </div>
    </header>
    <!-- header头部模块制作 end -->
    <!-- nav模块制作 start -->
    <nav class="w nav">
      <div class="w">
        <div class="dropdown">
          <div class="dt">全部商品分类</div>
          <div class="dd">
            <ul>
              <li>
                <a href="#"
                  ><router-link to="/developing">家用电器</router-link></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >手机、数码、通信</router-link
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing">电脑、办公</router-link></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >家居、家具、家装、厨具</router-link
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >男装、女装、童装、内衣</router-link
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >个户化妆、清洁用品、宠物</router-link
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >鞋靴、箱包、珠宝、奢侈品</router-link
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing">运动户外、钟表</router-link></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing">汽车、汽车用品</router-link></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing">母婴、玩具乐器</router-link></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >食品、酒类、生鲜、特产</router-link
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing">医药保健</router-link></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >图书、音像、电子书</router-link
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >彩票、旅行、充值、票务</router-link
                  ></a
                >
              </li>
              <li>
                <a href="#"
                  ><router-link to="/developing"
                    >理财、众筹、白条、保险</router-link
                  ></a
                >
              </li>
            </ul>
          </div>
        </div>
        <div class="navitems">
          <ul>
            <li>
              <a href="#"
                ><router-link to="/developing" style="padding: 0"
                  >服装城</router-link
                ></a
              >
            </li>
            <li>
              <a href="#"
                ><router-link to="/developing" style="padding: 0"
                  >试衣间</router-link
                ></a
              >
            </li>
            <li>
              <a href="#"
                ><router-link to="/developing" style="padding: 0"
                  >牛仔区</router-link
                ></a
              >
            </li>
            <li>
              <a href="#"
                ><router-link to="/developing" style="padding: 0"
                  >时尚论坛</router-link
                ></a
              >
            </li>
            <li>
              <a href="#"
                ><router-link to="/developing" style="padding: 0"
                  >饰品间</router-link
                ></a
              >
            </li>
            <li>
              <a href="#"
                ><router-link to="/developing" style="padding: 0"
                  >潮流馆</router-link
                ></a
              >
            </li>
            <li>
              <a href="#"
                ><router-link to="/developing" style="padding: 0"
                  >完美配装</router-link
                ></a
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- nav模块制作 end -->
    <!-- 首页专有的模块 main  start -->
    <div class="w">
      <div class="main">
        <div class="focus">
          <ul>
            <li>
              <img src="@/assets/upload/focus1.png" alt="" />
            </li>
          </ul>
        </div>
        <div class="newsflash">
          <div class="news">
            <div class="news-hd">
              <h5>源浩快报</h5>
              <a href="#" class="more"
                ><router-link to="/developing">更多</router-link></a
              >
            </div>
            <div class="news-bd">
              <ul>
                <li>
                  <a href="#"
                    ><strong>[重磅]</strong
                    ><router-link to="/developing">
                      暑假不让回家，学校的回答竟然是这样</router-link
                    >
                  </a>
                </li>
                <li>
                  <a href="#"
                    ><strong>[重磅]</strong
                    ><router-link to="/developing">
                      某大学竟做出这种事</router-link
                    >
                    ！</a
                  >
                </li>
                <li>
                  <a href="#"
                    ><strong>[重磅]</strong
                    ><router-link to="/developing">
                      女儿听了流泪，父亲听了沉默！</router-link
                    >
                  </a>
                </li>
                <li>
                  <a href="#"
                    ><strong>[重磅]</strong
                    ><router-link to="/developing">
                      震惊！电子科技大学惊现奇观！</router-link
                    >
                  </a>
                </li>
                <li>
                  <a href="#"
                    ><strong>[重磅]</strong
                    ><router-link to="/developing">
                      大三实训背后的肮脏交易！</router-link
                    ></a
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="lifeservice">
            <ul>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>机票</p>
              </li>
              <li>
                <i></i>
                <p>电影票</p>
              </li>
              <li>
                <i></i>
                <p>游戏</p>
              </li>
              <li>
                <i></i>
                <p>彩票</p>
              </li>
              <li>
                <i></i>
                <p>加油卡</p>
              </li>
              <li>
                <i></i>
                <p>酒店</p>
              </li>
              <li>
                <i></i>
                <p>火车票</p>
              </li>
              <li>
                <i></i>
                <p>众筹</p>
              </li>
              <li>
                <i></i>
                <p>理财</p>
              </li>
              <li>
                <i></i>
                <p>礼品卡</p>
              </li>
              <li>
                <i></i>
                <p>白条</p>
              </li>
            </ul>
          </div>
          <div class="bargain">
            <img src="@/assets/upload/bargain.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 首页专有的模块 main  end -->
    <!-- 推荐模块 start-->
    <div class="w recom">
      <div class="recom_hd">
        <img src="@/assets/images/recom.png" alt="" />
      </div>
      <div class="recom_bd">
        <ul>
          <li><img src="@/assets/upload/recom_03.jpg" alt="" /></li>
          <li><img src="@/assets/upload/recom_03.jpg" alt="" /></li>
          <li><img src="@/assets/upload/recom_03.jpg" alt="" /></li>
          <li><img src="@/assets/upload/recom_03.jpg" alt="" /></li>
        </ul>
      </div>
    </div>
    <!-- 推荐模块 end-->
    <!-- 商品模块start -->
    <div class="floor">
      <div class="ws head">
        <h4
          style="
            color: red;
            font-size: 20px;
            border-bottom: 2px solid red;
            margin-top: 30px;
          "
        >
          商品列表
        </h4>
      </div>
      <!-- 1楼麦克风楼层 -->
      <div class="ws maikefeng">
        <div class="box_bd">
          <div class="tab_content">
            <div class="tab_list_item">
              <div class="col_210">
                <span @click="toCart(productList[1].id)">
                  <img v-bind:src="images[0]" alt="" />
                  <p>{{ productList[0].name }}</p>
                  <p>
                    ￥<span>{{ productList[0].nowPrice }}</span>
                  </p>
                </span>
              </div>
              <div class="col_221">
                <span @click="toCart(productList[1].id)">
                  <img v-bind:src="images[1]" alt="" />
                  <p>{{ productList[1].name }}</p>
                  <p>
                    ￥<span>{{ productList[1].nowPrice }}</span>
                  </p>
                </span>
              </div>
              <div class="col_283">
                <span @click="toCart(productList[2].id)">
                  <img v-bind:src="images[2]" alt="" />
                  <p>{{ productList[2].name }}</p>
                  <p>
                    ￥<span>{{ productList[2].nowPrice }}</span>
                  </p>
                </span>
              </div>
              <div class="col_221">
                <span @click="toCart(productList[3].id)">
                  <img v-bind:src="images[3]" alt="" />
                  <p>{{ productList[3].name }}</p>
                  <p>
                    ￥<span>{{ productList[3].nowPrice }}</span>
                  </p>
                </span>
              </div>
              <div class="col_219">
                <span @click="toCart(productList[4].id)">
                  <img v-bind:src="images[4]" alt="" />
                  <p>{{ productList[4].name }}</p>
                  <p>
                    ￥<span>{{ productList[4].nowPrice }}</span>
                  </p>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 2楼摄像头楼层 -->
      <div class="ws shexaingtou">
        <div class="box_bd">
          <div class="tab_content">
            <div class="tab_list_item">
              <div class="col_210">
                <span @click="toCart(productList[5].id)">
                  <img v-bind:src="images[5]" alt="" />
                  <p>{{ productList[5].name }}</p>
                  <p>
                    ￥<span>{{ productList[5].nowPrice }}</span>
                  </p>
                </span>
              </div>
              <div class="col_221">
                <span @click="toCart(productList[6].id)">
                  <img v-bind:src="images[6]" alt="" />
                  <p>{{ productList[6].name }}</p>
                  <p>
                    ￥<span>{{ productList[6].nowPrice }}</span>
                  </p>
                </span>
              </div>
              <div class="col_283">
                <span @click="toCart(productList[7].id)">
                  <img v-bind:src="images[7]" alt="" />
                  <p>{{ productList[7].name }}</p>
                  <p>
                    ￥<span>{{ productList[7].nowPrice }}</span>
                  </p>
                </span>
              </div>
              <div class="col_221">
                <span @click="toCart(productList[8].id)">
                  <img v-bind:src="images[8]" alt="" />
                  <p>{{ productList[8].name }}</p>
                  <p>
                    ￥<span>{{ productList[8].nowPrice }}</span>
                  </p>
                </span>
              </div>
              <div class="col_219">
                <span @click="toCart(productList[9].id)">
                  <img v-bind:src="images[9]" alt="" />
                  <p>{{ productList[9].name }}</p>
                  <p>
                    ￥<span>{{ productList[9].nowPrice }}</span>
                  </p>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品模块end -->
  </div>
</template>

<script>
import { getTest, productGetList } from "@/api/api.js";
export default {
  name: "HomaPage",
  data() {
    return {
      productList: [],
      images: [],
    };
  },
  methods: {
    search: async function () {
      let res = await getTest();
      console.log(res.data.Result);
      alert(res.data.Result);
    },
    toCart: function (productId) {
      this.$router.push({
        path: "/detail",
        query: { id: productId },
      });
    },
  },
  created: async function () {
    let res = await productGetList();
    console.log(res.data.ProductGetListObjectResult);
    this.productList = res.data.ProductGetListObjectResult;

    for (let i = 0; i < this.productList.length; i++) {
      this.images[i] = require("@/assets/upload/" + this.productList[i].image);
    }
    // this.image1 = require("@/assets/upload/"+this.productList[0].image);
  },
};

import "@/assets/css/base.css";
import "@/assets/css/common.css";
import "@/assets/css/index.css";
</script>

<style>
</style>